<!DOCTYPE html>
<html lang="en">
<head>
    {% load static %}
    <meta charset="UTF-8">
    <title>{% block title %}B站爬取TOP100数据可视化{% endblock %}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- plugins:css -->
    <link rel="stylesheet" href="{% static 'css/vendors/mdi/css/materialdesignicons.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/vendors/base/vendor.bundle.base.css' %}">
    <!-- endinject -->
    <!-- plugin css for this page -->
    <link rel="stylesheet" href="{% static 'css/vendors/datatables.net-bs4/dataTables.bootstrap4.css' %}">
    <!-- End plugin css for this page -->
    <!-- inject:css -->
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
    <!-- endinject -->
    <link rel="shortcut icon" href="{% static 'images/logo.png' %}" />
    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script src="{% static 'js/echarts.min.js' %}"></script>
</head>
<body>
<div class="container-scroller">
    <!-- partial:partials/_navbar.html -->
    <nav class="navbar col-lg-12 col-12 p-0 fixed-top d-flex flex-row">
        <div class="navbar-brand-wrapper d-flex justify-content-center">
            <div class="navbar-brand-inner-wrapper d-flex justify-content-between align-items-center w-100">
                <a class="navbar-brand brand-logo" href="{% url 'main:index' %}"><img src="{% static 'images/logo.svg' %}" alt="logo"/></a>
                <a class="navbar-brand brand-logo-mini" href="{% url 'main:index' %}"><img src="{% static 'images/logo.svg' %}" alt="logo"/></a>
                <button class="navbar-toggler navbar-toggler align-self-center" type="button" data-toggle="minimize">
                    <span class="mdi mdi-sort-variant"></span>
                </button>
            </div>
        </div>
        <div class="navbar-menu-wrapper d-flex align-items-center justify-content-end">
            <ul class="navbar-nav mr-lg-4 w-100">
                <li class="nav-item nav-search d-none d-lg-block w-100">
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text" id="search">
                                <i class="mdi mdi-magnify"></i>
                            </span>
                        </div>
                        <input type="text" class="form-control" placeholder="输入BV号进行搜索(例如:BV1WpQtYpEtf),视频的弹幕/评论越多等待时间越慢。暂不支持多P视频" aria-label="search" aria-describedby="search" id="BVsearch">
                        <!-- 添加隐藏的CSRF令牌输入框 -->
                        <input type="hidden" id="csrfTokenInput" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
                    </div>
                </li>
            </ul>
            <script>
                $(document).ready(function () {
                    $('#BVsearch').keypress(function (e) {
                        if (e.which === 13) {
                            var inputValue = $(this).val();
                            var regex = /^BV[a-zA-Z0-9]{10}$/;
                            if (!regex.test(inputValue)) {
                                window.location.href = 'search?';
                            } else {
                                // 检测 is_logged_in 是否为 true
                                {% if is_logged_in %}
                                    var csrftoken = $('#csrfTokenInput').val();
                                    $.ajax({
                                        url: 'search',
                                        type: 'POST',
                                        contentType: 'application/json',
                                        data: JSON.stringify({ bv: inputValue }),
                                        headers: {
                                            'X-CSRFToken': csrftoken
                                        },
                                        success: function (response) {
                                            if (response.data.status === 200) {
                                                window.location.href = response.data.url;
                                                {#console.log(response.url)#}
                                            } else {
                                                {#console.log(response.message)#}
                                                {#console.log(response.status)#}
                                                console.log(response)
                                            }
                                        },
                                        error: function (error) {
                                            alert('请求出错：' + JSON.stringify(error));
                                            console.log(error)
                                        }
                                    });
                                {% else %}
                                    window.location.href = "{% url 'login:login' %}";
                                {% endif %}
                            }
                        }
                    });
                });
            </script>
            <ul class="navbar-nav navbar-nav-right">
                <li class="nav-item nav-profile dropdown">
                    {% block login_menu %}
                        {% if is_logged_in %}
                            <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" id="profileDropdown">
                                <img src="{% static '/images/default.png' %}" alt="profile"/>
                                <span class="nav-profile-name">{{ user.username }}</span>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right navbar-dropdown" aria-labelledby="profileDropdown">
                                <a class="dropdown-item">
                                    <i class="mdi mdi-settings text-primary"></i>
                                    Settings
                                </a>
                                <a class="dropdown-item" href="{% url 'login:logout' %}">
                                    <i class="mdi mdi-logout-variant text-primary"></i>
                                    Logout
                                </a>
                            </div>
                        {% else %}
                            <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" id="profileDropdown">
                                <img src="{% static 'images/null.png' %}" alt="profile"/>
                                <span class="nav-profile-name">点击登录</span>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right navbar-dropdown" aria-labelledby="profileDropdown">
                                <a class="dropdown-item" href="{% url 'login:login' %}">
                                    <i class="mdi mdi-login-variant text-primary"></i>
                                    登录
                                </a>
                            </div>
                        {% endif %}
                    {% endblock %}
                </li>
            </ul>
        </div>
    </nav>
    <!-- partial -->
    <div class="container-fluid page-body-wrapper">
        <!-- partial:partials/_sidebar.html -->
        <nav class="sidebar sidebar-offcanvas" id="sidebar">
            <ul class="nav">
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'main:index' %}">
                        <i class="mdi mdi-home menu-icon"></i>
                        <span class="menu-title">主页</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="collapse" href="#ui-basic" aria-expanded="false" aria-controls="ui-basic">
                        <i class="mdi mdi-chart-pie menu-icon"></i>
                        <span class="menu-title">各区可视化分析</span>
                        <i class="menu-arrow"></i>
                    </a>
                    <div class="collapse" id="ui-basic">
                        <ul class="nav flex-column sub-menu">
                            <li class="nav-item">
                                <a class="nav-link" href="{% url 'main:all_chart' %}">全区总览</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="{% url 'main:animation_chart' %}">动画</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="{% url 'main:music_chart' %}">音乐</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="{% url 'main:dance_chart' %}">舞蹈</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="{% url 'main:game_chart' %}">游戏</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="{% url 'main:knowledge_chart' %}">知识</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="{% url 'main:technology_chart' %}">科技</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="{% url 'main:motion_chart' %}">运动</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="{% url 'main:car_chart' %}">汽车</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="{% url 'main:live_chart' %}">生活</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="{% url 'main:food_chart' %}">美食</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="{% url 'main:animal_chart' %}">动物</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="{% url 'main:ghost_animal_chart' %}">鬼畜</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="{% url 'main:vogue_chart' %}">时尚</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="{% url 'main:amusement_chart' %}">娱乐</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="{% url 'main:film_chart' %}">影视</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="{% url 'main:original_chart' %}">原创</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="{% url 'main:newcomer_chart' %}">新人</a>
                            </li>
                        </ul>
                    </div>
                </li>
                {% block sidebar %}
                {% endblock %}
            </ul>
        </nav>
        <!-- partial -->
        <div class="main-panel">
            {% block content-wrapper %}
            {% endblock %}
            <!-- content-wrapper ends -->
            <!-- partial:partials/_footer.html -->
            <footer class="footer">
                <div class="d-sm-flex justify-content-center justify-content-sm-between">
                    {% block footer %}
                        <span class="text-muted text-center text-sm-left d-block d-sm-inline-block">Copyright &copy; 2025.Company name All rights reserved.</span>
                        <span class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center"></span>
                    {% endblock %}
                </div>
            </footer>
            <!-- partial -->
        </div>
        <!-- main-panel ends -->
    </div>
    <!-- page-body-wrapper ends -->
</div>
<!-- container-scroller -->

<!-- plugins:js -->
<script src="{% static 'css/vendors/base/vendor.bundle.base.js' %}"></script>
<!-- endinject -->
<!-- Plugin js for this page-->
<script src="{% static 'css/vendors/chart.js/Chart.min.js' %}"></script>
<script src="{% static 'css/vendors/datatables.net/jquery.dataTables.js' %}"></script>
<script src="{% static 'css/vendors/datatables.net-bs4/dataTables.bootstrap4.js' %}"></script>
<!-- End plugin js for this page-->
<!-- inject:js -->
<script src="{% static 'js/off-canvas.js' %}"></script>
<script src="{% static 'js/hoverable-collapse.js' %}"></script>
<script src="{% static 'js/template.js' %}"></script>
<!-- endinject -->
<!-- Custom js for this page-->
<script src="{% static 'js/dashboard.js' %}"></script>
<script src="{% static 'js/data-table.js' %}"></script>
<script src="{% static 'js/data-table.js' %}"></script>
<script src="{% static 'js/dataTables.bootstrap4.js' %}"></script>
<!-- End custom js for this page-->
</body>
</html>